<!--
 * @Author: your name
 * @Date: 2021-09-07 21:47:57
 * @LastEditTime: 2021-09-09 16:48:31
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \musicapp\src\components\playController.vue
-->
<template>
  <div class="playController">
      <div class="left" @click="show=!show">
          <img :src="playlist[playCurrentIndex].al.picUrl" alt="">
          <div class="content">
              <div class="title">{{playlist[playCurrentIndex].name}}</div>
              <div class="tips">横滑可以切换上下首哦</div>
          </div>
      </div>
      <div class="right">
          <svg v-if="paused" class="icon" @click="play">
              <use xlink:href="#icon-bofang"></use>
            </svg>
            <svg v-else class="icon" @click="play">
              <use xlink:href="#icon-caozuo-bofang-zanting"></use>
            </svg>
            <svg class="icon"><use xlink:href="#icon-liebiao"></use></svg>
      </div>
        <playMusic @back="show=!show" v-show="show" :play="play" :paused="paused" :playDetail="playlist[playCurrentIndex]"></playMusic>
      <audio ref="audio" :src="`https://music.163.com/song/media/outer/url?id=${playlist[playCurrentIndex].id}.mp3`"></audio>
  </div>
</template>

<script>
import {mapState,mapMutations} from 'vuex'
import playMusic from '@/components/playMusic.vue'
export default {
    data() {
        return {
            paused:true,
            show:false
        }
    },
    components:{
        playMusic
    },
    computed:{
        ...mapState(['playlist','playCurrentIndex'])
    },
    mounted(){
        // console.log(this.$refs);
        this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})
        console.log(this.playlist[this.playCurrentIndex]);
        
    },
    updated(){
        this.$store.dispatch('reqLyric',{id:this.playlist[this.playCurrentIndex].id})
    },
    methods:{
        play:function(){
            console.log(this.$refs.audio.currentTime);
            if(this.$refs.audio.paused){
                this.$refs.audio.play()
                this.paused = false
                this.UpdateTime()
            }else{
                this.$refs.audio.pause()
                this.paused = true
                clearInterval(this.$store.state.intervalId)
            }
            
        },
        UpdateTime() {
            this.$store.state.intervalId = setInterval(() => {
                this.$store.commit('setCurrentTime', this.$refs.audio.currentTime)
            }, 1000);
        }
    }
}
</script>

<style lang="less" scoped>
.playController{
    background-color: #fff;
    width: 7.5rem;
    height: 1.2rem;
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    .left{
        display: flex;
        padding: 0 0.2rem;
        align-items: center;
        img{
            width: 0.8rem;
            height: 0.8rem;
            border-radius: 0.4rem;
        }
        .content{
            padding: 0 0.2rem;
            .tips{
                font-size: 0.2rem;
                color: #999;
            }
        }
    }
    .right{
        display: flex;
        justify-content: space-between;
        align-items: center;
        .icon{
            width: 0.5rem;
            height: 0.5rem;
            margin: 0 0.2rem;
        }
    }
}
</style>